<template>
  <div class="main">
    <el-card shadow="never" class="content-wrap">
      <Header></Header>
    </el-card>
    <div class="language">
      <div class="languageBox">
        <div class="radioBox">
          <div style="font-size: 20px;">图像特效</div>
          <el-radio-group v-model="radio1" size="large">
            <el-radio-button label="黑白图像上色" />
            <el-radio-button label="图像风格转换" />
            <el-radio-button label="自定义图像风格" />
            <el-radio-button label="人像动漫化" />
          </el-radio-group>
        </div>
        <div class="radioBox" id="styleType">
          <div style="font-size: 20px;">风格</div>
          <el-radio-group v-model="radio2" size="large">
            <el-radio-button label="卡通画" />
            <el-radio-button label="铅笔" />
            <el-radio-button label="彩色铅笔画" />
            <el-radio-button label="神奈川冲浪里油画" />
            <el-radio-button label="薰衣草油画" />
            <el-radio-button label="奇异油画" />
            <el-radio-button label="呐喊油画" />
            <el-radio-button label="哥特油画" />
          </el-radio-group>
        </div>
        <div class="radioBox">
          <div style="font-size: 20px;">图像增强</div>
          <el-radio-group v-model="radio1" size="large">
            <el-radio-button label="图片去摩尔纹" @click="handleImgEnhance(200)" />
            <el-radio-button label="图像去雾" @click="handleImgEnhance(300)" />
            <el-radio-button label="图像对比度增强" @click="handleImgEnhance(400)" />
            <el-radio-button label="图像无损放大" @click="handleImgEnhance(500)" />
            <el-radio-button label="拉伸图像恢复" @click="handleImgEnhance(600)" />
            <el-radio-button label="图像修复" @click="handleImgEnhance(700)" />
            <el-radio-button label="图像清晰度增强" @click="handleImgEnhance(800)" />
            <el-radio-button label="图像色彩增强" @click="handleImgEnhance(900)" />
            <el-radio-button label="文档图片去底纹" @click="handleImgEnhance(1000)" />
            <el-radio-button label="图像去噪" @click="handleImgEnhance(1100)" />
          </el-radio-group>
        </div>
      </div>
    </div>
    <div class="exampleImg" id="hide1">
      <div>智能识别黑白图像内容并填充色彩，使黑白图像变得鲜活。示意图如下：</div>
      <img src="../../assets/application/1.png" alt="">
    </div>
    <div class="exampleImg" id="hide2">
      <div>可将图像转化成卡通画、铅笔画、彩色铅笔画，或者哥特油画、彩色糖块油画、呐喊油画、神奈川冲浪里油画、奇异油画、薰衣草油画等共计9种风格，可用于开展趣味活动，或集成到美图应用中对图像进行风格转换。
        以薰衣草油画风格为例示意图如下：</div>
      <img src="../../assets/application/2.png" alt="">
    </div>
    <div class="exampleImg" id="hide3">
      <div>支持自定义风格图+待处理图片进行风格迁移处理，自定义图片的风格，同时也提供30种艺术风格供选择，可用于开展趣味活动，或集成到美图应用中对图像进行风格转换。 以自定义风格为例示意图如下：</div>
      <img src="../../assets/application/3.png" alt="">
    </div>
    <div class="exampleImg" id="hide4">
      <div>运用世界领先的对抗生成网络，结合人脸检测、头发分割、人像分割等技术，为用户量身定制千人千面的二次元动漫形象，并且可通过参数设置，生成戴口罩的二次元动漫人像。示意图如下：</div>
      <img src="../../assets/application/4.png" alt="">
    </div>
    <div class="exampleImg" id="hide5">
      <div>对浓雾天气下拍摄，导致细节无法辨认的图像进行去雾处理，还原更清晰真实的图像。示意图如下：</div>
      <img src="../../assets/application/5.png" alt="">
    </div>
    <div class="exampleImg" id="hide6">
      <div>调整过暗或者过亮图像的对比度，使图像更加鲜明。示意图如下：</div>
      <img src="../../assets/application/6.png" alt="">
    </div>
    <div class="exampleImg" id="hide7">
      <div>输入一张图片，可以在尽量保持图像质量的条件下，将图像在长宽方向各放大两倍。示意图如下：</div>
      <img src="../../assets/application/7.png" alt="">
    </div>
    <div class="exampleImg" id="hide8">
      <div>自动识别过度拉伸的图像，将图像内容恢复成正常比例。示意图如下：</div>
      <img src="../../assets/application/8.png" alt="">
    </div>
    <div class="exampleImg" id="hide9">
      <div>在图片中指定位置框定一个规则矩形，去掉不需要的遮挡物，并用背景内容填充，提高图像质量。示意图如下：</div>
      <img src="../../assets/application/9.png" alt="">
    </div>
    <div class="exampleImg" id="hide10">
      <div>对压缩后的模糊图像实现智能快速去噪，优化图像纹理细节，使画面更加自然清晰。示意图如下：</div>
      <img src="../../assets/application/10.png" alt="">
    </div>
    <div class="exampleImg" id="hide11">
      <div>可智能调节图片的色彩饱和度、亮度、对比度，使得图片内容细节、色彩更加逼真，可用于提升网站图片、手机相册图片、视频封面图片的质量。示意图如下：</div>
      <img src="../../assets/application/11.png" alt="">
    </div>
    <div class="exampleImg" id="hide12">
      <div>去除翻拍电脑、手机等显示屏照片中的摩尔纹，使图片更加清晰。示意图如下：</div>
      <img src="../../assets/application/12.png" alt="">
    </div>
    <div class="exampleImg" id="hide13">
      <div>自动识别并去除文档图片中的底纹，使图片更加清晰，便于阅读。示意图如下：</div>
      <img src="../../assets/application/13.png" alt="">
    </div>
    <div class="exampleImg" id="hide14">
      <div>自动识别图片内（由成像设备或者外部环境导致的）噪点，进行去噪处理，使得图像更加干净，细节更加突出。常见应用场景为老照片修复、监控图片处理。示意图如下：</div>
      <img src="../../assets/application/14.png" alt="">
    </div>
    <div class="putBox">
      <div class="putVoiceBox">
        <div class="putVoice">
          <div class="preview">
            <div>图片预览</div>
            <div class="addmore" style="margin-left: 20px" @click="clearImg">
              <el-icon class="iconClear">
                <Delete />
              </el-icon>
              <div>清空</div>
            </div>
          </div>
          <div class="getImg" v-show="!imgSrc">
            <el-icon class="icon">
              <List />
            </el-icon>
            <div class="h3">点击添加图片</div>
            <div class="h5">准确率最高97.5%·数据安全保护</div>
            <input id="input1" class="inputVoice" type="file" accept="image/*" @change="inputVoice($event)">
          </div>
          <div class="getImg" v-show="imgSrc">
            <img :src="imgSrc" alt="">
          </div>
          <div class="footerBtn">
            <div class="addmore" @click="handleIdentify">
              <el-icon class="iconClear">
                <Refresh />
              </el-icon>
              <div>转化</div>
            </div>
          </div>
        </div>
      </div>

      <div class="putVoiceBox" v-show="showCustomizationStyle">
        <div class="putVoice">
          <div class="preview">
            <div>图片预览</div>
            <div class="addmore" style="margin-left: 20px" @click="clearImg2">
              <el-icon class="iconClear">
                <Delete />
              </el-icon>
              <div>清空</div>
            </div>
          </div>
          <div class="getImg" v-show="!imgSrc2">
            <el-icon class="icon">
              <List />
            </el-icon>
            <div class="h3">点击添加图片</div>
            <div class="h5">准确率最高97.5%·数据安全保护</div>
            <input id="input2" class="inputVoice" type="file" accept="image/*" @change="inputVoice2($event)">
          </div>
          <div class="getImg" v-show="imgSrc2">
            <img :src="imgSrc2" alt="">
          </div>
          <div class="footerBtn">
            <div class="addmore">
              <el-icon class="iconClear">
                <Refresh />
              </el-icon>
              <div>转化</div>
            </div>
          </div>
        </div>
      </div>

      <div class="putVoiceBox">
        <div class="putVoice">
          <div class="preview">
            <div>转化结果</div>
          </div>
          <div class="getImg">
            <img :src="image" alt="" v-if="image">
            <span v-else>{{ recognitionText }}</span>
          </div>
          <div class="footerBtn">
            <div class="addmore" @click="download">
              <el-icon class="iconClear">
                <Download />
              </el-icon>
              <div>下载</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { getImageDenoiseRes, getImageOrTextIdentifyRes } from '@/api/identify'
import { ElMessage } from 'element-plus'
import { ref } from 'vue'
// import func from 'vue-temp/vue-editor-bridge'
const radio1 = ref('黑白图像上色')
const radio2 = ref()
const showCustomizationStyle = ref()
const imgSrc: any = ref()
const imgSrc2: any = ref()
const recognitionText = ref('开放蓝天')

const image = ref(null)
const imgCode = ref(-1)
const fileData = reactive({
  data: null,
  name: ''
})

onMounted(() => {
  setHide(1)
  if (sessionStorage.getItem('them') === 'fff') {
    document.documentElement.style.setProperty("--main-shallowbg-color", '#454653')
    document.documentElement.style.setProperty("--main-bg-color", '#22252a')
    document.documentElement.style.setProperty("--main-font-color", '#fff')
    document.documentElement.style.setProperty("--main-shallowfont-color", '#fff')
    document.documentElement.style.setProperty("--main-shallowfont2-color", '#fff')
    document.documentElement.style.setProperty("--el-border-color", '#454653')
    document.documentElement.style.setProperty("--main-elbtn-color", '#454653')
  } else {
    document.documentElement.style.setProperty("--main-shallowbg-color", '#f2f3f4')
    document.documentElement.style.setProperty("--main-bg-color", '#fff')
    document.documentElement.style.setProperty("--main-font-color", '#303133')
    document.documentElement.style.setProperty("--main-shallowfont-color", '#d6d7d8')
    document.documentElement.style.setProperty("--main-shallowfont2-color", 'rgba(0, 0, 0, 0.46)')
    document.documentElement.style.setProperty("--el-border-color", '#dcdfe6')
    document.documentElement.style.setProperty("--main-elbtn-color", '#409eff')
  }
})


watchEffect(() => {
  const arr = ['黑白图像上色', '图像风格转换', '自定义图像风格', '人像动漫化'];
  const index = arr.indexOf(radio1.value);
  if (index !== -1) {
    ElMessage({
      dangerouslyUseHTMLString: true,
      message: `暂不支持<strong style="color:red">${arr[index]}</strong>功能`,
      type: 'warning'
    })
  }
})

// 标题
watch(radio1, (newval: any, oldVal: any) => {
  switch (newval) {
    case '黑白图像上色':
      setHide(1)
      break;
    case '图像风格转换':
      setHide(2)
      break;
    case '自定义图像风格':
      setHide(3)
      break;
    case '人像动漫化':
      setHide(4)
      break;
    case '图像去雾':
      setHide(5)
      break;
    case '图像对比度增强':
      setHide(6)
      break;
    case '图像无损放大':
      setHide(7)
      break;
    case '拉伸图像恢复':
      setHide(8)
      break;
    case '图像修复':
      setHide(9)
      break;
    case '图像清晰度增强':
      setHide(10)
      break;
    case '图像色彩增强':
      setHide(11)
      break;
    case '图片去摩尔纹':
      setHide(12)
      break;
    case '文档图片去底纹':
      setHide(13)
      break;
    case '图像去噪':
      setHide(14)
      break;
    default:
      break;
  }

})
function setHide(val) {
  for (let i = 1; i < 15; i++) {
    if (i === val) {
      document.getElementById(`hide${i}`).style.display = 'block'
    } else {
      document.getElementById(`hide${i}`).style.display = 'none'
    }
    if (val === 2) {
      document.getElementById(`styleType`).style.display = 'block'
    } else {
      document.getElementById(`styleType`).style.display = 'none'
    }
    if (val === 3) {
      showCustomizationStyle.value = true
    } else {
      showCustomizationStyle.value = false
    }
  }
}

const handleImgEnhance = code => {
  imgCode.value = code;
}


// 识别图片上传
const handleIdentify = () => {
  if (imgCode.value === -1) {
    ElMessage({
      message: '请选择你要识别的类型',
      type: 'error'
    })
    return;
  }

  if (!imgSrc.value) {
    ElMessage({
      message: '请选择你要上传的图片',
      type: 'error'
    })
    return;
  }

  const formData = new FormData();
  formData.append('file', fileData.data, fileData.name);
  formData.append('code', `${imgCode.value}`);

  if (imgCode.value === 1100) {
    formData.append('option', '200')
    console.log('图像降噪');
    getImageDenoiseRes(formData).then((res: any) => {
      if (!res.image) {
        ElMessage({
          message: '该图像不支持降噪',
          type: 'warning'
        })
        return
      }
      image.value = res.image;
      console.log(res.image);
    })
    return
  }

  getImageOrTextIdentifyRes(formData).then((res: any) => {
    if (!res.image) {
        ElMessage({
          message: '图像识别失败',
          type: 'warning'
        })
      }
    image.value = res.image;
  })
}

// 选择文件提交
function inputVoice(e) {
  console.log('$event', e.target.files)
  const file = e.target.files[0]

  if (!file) return
  fileData.data = file;
  fileData.name = file.name;

  const reader = new FileReader();
  //为文件读取成功设置事件
  reader.onload = function (val) {
    imgSrc.value = val.target.result
  };
  reader.readAsDataURL(file);
}
function inputVoice2(e) {
  console.log('$event', e.target.files)
  const file = e.target.files[0]
  const reader = new FileReader();
  //为文件读取成功设置事件
  reader.onload = function (val) {
    imgSrc2.value = val.target.result
  };
  reader.readAsDataURL(file);
}

function clearImg() {
  imgSrc.value = '';
  image.value = '';
  fileData.data = null;
  fileData.name = '';
  (<HTMLInputElement>document.getElementById('input1')).value = ''
}
function clearImg2() {
  imgSrc2.value = '';
  image.value = '';
  fileData.data = null;
  fileData.name = '';
  (<HTMLInputElement>document.getElementById('input2')).value = ''
}
function download() {
  if (!image.value) {
    ElMessage({
      message: '请先识别图片,再下载',
      type: 'error'
    })
    return;
  }

  let a = document.createElement('a')
  a.href = image.value
  a.download = `识别结果${new Date().getTime()}.png`
  document.body.appendChild(a)
  a.click()
  document.body.removeChild(a)
}
</script>

<style lang="scss" scoped>
  .main {
    min-height: 1500px;
    // padding: 20px;
    background-color: var(--main-shallowbg-color);
  }

  // .putBox {
  //   // width: 90%;
  //   // margin: 50px auto;
  //   // display: flex;
  //   // justify-content: space-around;
  // }
  .inputVoice {
    opacity: 0.0;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    position: absolute;
  }

  // .putVoice:hover {
  //   box-shadow: 9px 8px 12px var(--main-shallowfont-color);
  // }
  .putVoiceBox {
    width: 90%;
    height: 420px;
    margin: 10px auto;
  }

  .putVoice {
    position: relative;
    transition-property: all;
    transition-duration: 0.6s;
    width: 100%;
    height: 400px;
    background-color: var(--main-bg-color);
    color: var(--main-font-color);
    // display: flex;
    // flex-direction: column;
    // justify-content: center;
    // align-items: center;
    border-radius: 10px;
  }

  .preview {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 10%;
    width: 90%;
    margin: 0px auto;
    font-size: 15px;
  }

  .getImg {
    position: relative;
    transition-property: all;
    transition-duration: 0.6s;
    width: 90%;
    height: 75%;
    margin: 5px auto 0px;
    background-color: var(--main-bg-color);
    color: var(--main-font-color);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: 10px;
    border: 4px dotted var(--main-shallowbg-color);

    img {
      width: 100%;
      height: 100%;
    }

    .icon {
      font-size: 60px;
      margin-top: -60px;
      margin-bottom: 20px;
      position: relative;
      top: 0px;
      animation-name: example;
      animation-duration: 1s;
      animation-iteration-count: infinite;
      animation-direction: alternate;
      animation-timing-function: linear;
    }

    .h3 {
      font-size: 25px;
      font-weight: 600;
      margin-bottom: 10px;
    }

    .h5 {
      color: #969696;
    }
  }

  @keyframes example {
    from {
      top: 0;
    }

    to {
      top: 12px;
    }
  }

  .addmore {
    transition-property: all;
    transition-duration: 0.5s;
    width: 25%;
    height: 27px;
    border-radius: 10px;
    border: 1px solid;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    cursor: pointer;

    .iconClear {
      font-size: 15px;
    }
  }

  .addmore:hover {
    box-shadow: 3px 3px 4px 1px var(--main-shallowfont-color);
  }

  .footerBtn {
    width: 90%;
    height: 10%;
    margin: 10px auto;
    display: flex;
    justify-content: flex-end;
    font-size: 15px;
  }

  .languageBox {
    background-color: var(--main-shallowbg-color);
    // width: 60%;
    // height: 400px;
    padding: 10px;
    color: var(--main-font-color);
  }

  .radioBox {
    margin-top: 10px;
  }

  ::v-deep .el-radio-group {
    margin: 10px;
  }

  ::v-deep .el-radio-button__inner {
    color: var(--main-font-color);
    background-color: var(--main-bg-color);
  }

  ::v-deep .el-radio-button__original-radio:checked+.el-radio-button__inner {
    color: var(--main-bg-color);
    background-color: var(--main-font-color);
    border: var(--main-font-color);
    box-shadow: none;
  }

  .exampleImg {
    width: 89%;
    // height: 350px;
    margin: 5px auto;

    div {
      font-size: 15px;
      margin: 5px;
      color: var(--main-font-color);
    }

    img {
      max-width: 100%;
      margin: 5px 0px;
      height: 150px;
    }
  }

  @media screen and (min-width: 600px) {
    .main {
      min-height: 1500px;
      // padding: 20px;
      background-color: var(--main-shallowbg-color);
    }

    .putBox {
      width: 95%;
      margin: 0px auto;
      display: flex;
      justify-content: space-around;
    }

    .inputVoice {
      opacity: 0.0;
      width: 100%;
      height: 100%;
      top: 0px;
      left: 0px;
      position: absolute;
    }

    // .putVoice:hover {
    //   box-shadow: 9px 8px 12px var(--main-shallowfont-color);
    // }
    .putVoiceBox {
      width: 40%;
      // height: 450px;
      margin: 10px;
    }

    .putVoice {
      position: relative;
      transition-property: all;
      transition-duration: 0.6s;
      width: 100%;
      height: 400px;
      background-color: var(--main-bg-color);
      color: var(--main-font-color);
      // display: flex;
      // flex-direction: column;
      // justify-content: center;
      // align-items: center;
      border-radius: 10px;
    }

    .preview {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 10%;
      width: 90%;
      margin: 0px auto;
      font-size: 17px;
    }

    .getImg {
      position: relative;
      transition-property: all;
      transition-duration: 0.6s;
      width: 90%;
      height: 76%;
      margin: 0px auto;
      background-color: var(--main-bg-color);
      color: var(--main-font-color);
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      border-radius: 10px;
      border: 4px dotted var(--main-shallowbg-color);

      img {
        width: 100%;
        height: 100%;
      }

      .icon {
        font-size: 60px;
        margin-top: -60px;
        margin-bottom: 20px;
      }

      .h3 {
        font-size: 25px;
        font-weight: 600;
        margin-bottom: 10px;
      }

      .h5 {
        color: #969696;
      }
    }

    .languageBox {
      background-color: var(--main-shallowbg-color);
      width: 90%;
      margin: 0px auto;
      // height: 400px;
      // padding: 30px 40px 30px 30px;
      color: var(--main-font-color);
    }

    .radioBox {
      margin: 10px;
    }

    .addmore {
      width: 18%;
      // height: 35px;
      border-radius: 10px;
      padding: 1px 10px;
      border: 1px solid;
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative;

      .iconClear {
        font-size: 20px;
      }
    }

    .footerBtn {
      width: 90%;
      height: 10%;
      margin: 10px auto;
      display: flex;
      justify-content: flex-end;
    }

    .exampleImg {
      width: 89%;
      // height: 350px;
      margin: 5px auto;

      div {
        font-size: 18px;
        margin: 5px;
      }

      img {
        max-width: 100%;
        margin: 15px 0px 10px 25px;
        height: 300px;
      }
    }
  }

  #hide1 {
    display: none;
  }

#hide2 {
  display: none;
}

#hide3 {
  display: none;
}

#hide4 {
  display: none;
}

#hide5 {
  display: none;
}

#hide6 {
  display: none;
}

#hide7 {
  display: none;
}

#hide8 {
  display: none;
}

#hide9 {
  display: none;
}

#hide10 {
  display: none;
}

#hide11 {
  display: none;
}

#hide12 {
  display: none;
}

#hide13 {
  display: none;
}

#hide14 {
  display: none;
}

#styleType {
  display: none;
}</style>